<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="home" class="shop_summary_page">
        <div class="header_wrapper">
            <div class="title">各店数据统计汇总</div>
        </div>
        <div class="kpi_screen_wrapper">
            <div class="days_screen_box">
                <div class="item active">近7日</div>
                <div class="item">近30日</div>
            </div>
            <div class="time_box">
                <div class="text">自定义：</div>
                <div class="time_select_box">
                    <input class="layui-input" type="text" id="startDate" placeholder="开始日期">
                    <span class="text units">至</span>
                    <input class="layui-input" type="text" id="endDate" placeholder="结束日期">
                </div>
            </div>
        </div>
        <div class="section_wrapper">
            <div class="section_item">
                <div class="kpi_item" id="cus_add_kpi"></div>
            </div>
            <div class="section_item">
                <div class="kpi_item" id="group_active_kpi"></div>
            </div>
        </div>
        <div class="screen_wrapper">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">店代码</label>
                    <div class="layui-input-block">
                        <select name="shopID" lay-search lay-filter="select_shopid">
                            <option value=""></option>
                            <option value="DD001">DD001</option>
                            <option value="DD002">DD002</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">店名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="shopName" placeholder="请输入店名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <button class="normal_btn search_btn" lay-submit lay-filter="search_btn">查询</button>
            </form>
        </div>
        <div class="table-wrapper">
            <table class="layui-table" id="shop_table" style="table-layout: fixed;">
                <thead>
                    <tr>
                        <th class="shopid">店代码</th>
                        <th class="shopname">店名称</th>
                        <th>店内成员</th>
                        <th>群聊数</th>
                        <th>活跃群聊数</th>
                        <th>客户数</th>
                        <th>活跃客户数</th>
                        <th>新增客户</th>
                        <th>新增群聊</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>DD001</td>
                        <td>三菱蓝天店</td>
                        <td>7</td>
                        <td>228</td>
                        <td>100</td>
                        <td>3081</td>
                        <td>2562</td>
                        <td>5</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>DD002</td>
                        <td>三菱炜坤店</td>
                        <td>7</td>
                        <td>182</td>
                        <td>80</td>
                        <td>2981</td>
                        <td>2000</td>
                        <td>7</td>
                        <td>5</td>
                    </tr>
                </tbody>
            </table>
            <div class="paging_style" id="paging"></div>
        </div>
    </div>

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.js"></script>
    <!-- chart图表 -->
    <script src="../../js/highcharts/highcharts.js"></script>
    <script src="../../js/highcharts/exporting.js"></script>
    <script src="../../js/highcharts/no-data-to-display.js"></script>
    <script>
        // 获取当前日期
        function getDate() {
            var mydate = new Date();
            var str = "" + mydate.getFullYear() + "-";
            let month = "";
            let day = "";
            if (mydate.getMonth() < 10) {
                month = "0" + (mydate.getMonth() + 1);
            } else {
                month = mydate.getMonth() + 1;
            }
            if (mydate.getDate() < 10) {
                day = "0" + mydate.getDate();
            } else {
                day = mydate.getDate();
            }
            str += month + "-";
            str += day;
            return str;
        }
        // 昨天的日期
        function getPreDate(dayNum) {
            var day1 = new Date();
            day1.setTime(day1.getTime() - (dayNum || 1) * 24 * 60 * 60 * 1000);
            let month = "";
            let day = "";
            if (day1.getMonth() < 10) {
                month = "0" + (day1.getMonth() + 1);
            } else {
                month = day1.getMonth() + 1;
            }
            if (day1.getDate() < 10) {
                day = "0" + day1.getDate();
            } else {
                day = day1.getDate();
            }
            var s1 = day1.getFullYear() + "-" + month + "-" + day;
            return s1;
        }
        let nowDate = getDate() // 当天日期
        let pre_7_date = getPreDate(7) // 前7日
        let pre_30_date = getPreDate(30) // 前30日
        let startDateSelected = pre_7_date // 自定义开始日期 默认前7天
        let endDateSelected = nowDate // 自定义结束日期 默认当天
        // 实例化表单
        layui.use('form', function () {
            var form = layui.form;
            // 查询 只针对于店名称
            form.on('submit(search_btn)', function (data) {
                let shopName = data.field.shopName // 店名称
                return false
            })
            // 店代码选择
            form.on('select(select_shopid)', function (data) {
                let shopid = data.value
                console.log(shopid)
                // 拿到shopid后请求ajax刷新表格数据
            })
            // 表格分页
            layui.use('laypage', function () {
                var laypage = layui.laypage;

                //执行一个laypage实例
                laypage.render({
                    elem: 'paging',
                    limit: 5,
                    theme: '#E51C23',
                    count: 20, //数据总数，从服务端得到
                    jump: function (obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if (!first) {
                            //do something
                        }
                    }
                });
            });

            layui.use('laydate', function () {
                var laydate = layui.laydate;

                // 自定义开始日期
                var startDate = laydate.render({
                    elem: '#startDate',
                    value: pre_7_date,
                    max: nowDate,
                    btns: ['clear', 'confirm'],
                    done(value, date) {
                        startDateSelected = value
                        endDate.config.min = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date
                        };
                    }
                })

                // 自定义结束日期
                var endDate = laydate.render({
                    elem: '#endDate',
                    value: nowDate,
                    max: nowDate,
                    btns: ['clear', 'confirm'],
                    done(value, date) {
                        endDateSelected = value
                    }
                })

                // 日期tab切换 默认进来是昨日的tab
                let dateTabSelect = "近7日"
                $(".days_screen_box .item").click(function () {
                    dateTabSelect = $(this).text()
                    $(this).addClass("active").siblings().removeClass("active")
                    if (dateTabSelect == '近7日') {
                        // 自定义开始日期
                        let startDate = laydate.render({
                            elem: '#startDate',
                            value: pre_7_date,
                            max: nowDate,
                            btns: ['clear', 'confirm'],
                            done(value, date) {
                                startDateSelected = value
                                endDate.config.min = {
                                    year: date.year,
                                    month: date.month - 1,
                                    date: date.date
                                };
                            }
                        })

                        // 自定义结束日期
                        let endDate = laydate.render({
                            elem: '#endDate',
                            value: nowDate,
                            max: nowDate,
                            btns: ['clear', 'confirm'],
                            done(value, date) {
                                endDateSelected = value
                            }
                        })
                    } else if (dateTabSelect == '近30日') {
                        // 自定义开始日期
                        let startDate = laydate.render({
                            elem: '#startDate',
                            value: pre_30_date,
                            max: nowDate,
                            btns: ['clear', 'confirm'],
                            done(value, date) {
                                startDateSelected = value
                                endDate.config.min = {
                                    year: date.year,
                                    month: date.month - 1,
                                    date: date.date
                                };
                            }
                        })

                        // 自定义结束日期
                        let endDate = laydate.render({
                            elem: '#endDate',
                            value: nowDate,
                            max: nowDate,
                            btns: ['clear', 'confirm'],
                            done(value, date) {
                                endDateSelected = value
                            }
                        })
                    }
                })
            })
        });

        // cus_add_kpi 新增客户数
        var cus_add_kpi = Highcharts.chart('cus_add_kpi', {
            title: {
                text: ''
            },
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7']
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                }
            },
            series: [{
                name: '新增客户数',
                data: [5, 10, 8, 4, 6, 6, 5, 7]
            }]
        })
        // group_active_kpi 活跃群聊数
        var group_active_kpi = Highcharts.chart('group_active_kpi', {
            title: {
                text: ''
            },
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7']
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                }
            },
            series: [{
                name: '活跃群聊数',
                data: [5, 10, 8, 4, 6, 6, 5, 7]
            }]
        })
    </script>
</body>

</html>